<template>
  <view class="card-manage-page">
    <!-- #ifdef MP-WEIXIN -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- #endif -->
    <!-- 顶部背景 -->
    <view class="shop-header">
      <view class="header-content">
        <view class="back-btn" @click="navigateBack">
          <image class="back-icon" src="/static/Images/shop/Fanhuih.png" mode="aspectFit"></image>
        </view>
        <view class="title">卡密管理</view>
      </view>
    </view>
    
    <!-- 商品状态标签 -->
    <view class="status-tabs">
      <view class="tab" :class="{active: activeTab === 'all'}" @click="switchTab('all')">全部</view>
      <view class="tab" :class="{active: activeTab === 'selling'}" @click="switchTab('selling')">出售中</view>
      <view class="tab" :class="{active: activeTab === 'trading'}" @click="switchTab('trading')">交易中</view>
      <view class="tab" :class="{active: activeTab === 'success'}" @click="switchTab('success')">已完成</view>
      <view class="tab" :class="{active: activeTab === 'soldout'}" @click="switchTab('soldout')">已下架</view>
      <view class="tab" :class="{active: activeTab === 'refund'}" @click="switchTab('refund')">退款/售后</view>
    </view>
    
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input">
        <image class="search-icon" src="/static/Images/shop/Search.png" mode="aspectFit"></image>
        <input type="text" placeholder="输入商品名称/卡密/订单编号" v-model="searchKeyword" />
      </view>
      <view class="search-btn" @click="handleSearch">查询</view>
    </view>
    
    <!-- 卡密列表 -->
    <view class="card-list">
      <scroll-view 
          class="card-scroll" 
          scroll-y="true"
          @scrolltolower="onScrollToLower"
          :style="{ height: scrollHeight }"
          :lower-threshold="100"
          :enable-back-to-top="true"
        >
        <!-- 加载状态 -->
        <view v-if="loading && cardList.length === 0" class="loading-container">
          <text>加载中...</text>
        </view>
        
        <!-- 空数据状态 -->
        <view v-else-if="!loading && cardList.length === 0" class="empty-container">
          <text>暂无数据</text>
        </view>
        
        <!-- 卡密项 -->
        <view class="card-item" v-for="(item, index) in filteredCardList" :key="item.id || index">
        <view class="card-info">
          <view class="info-row">
            <view class="info-label">商品名称：</view>
            <view class="info-value product-name">{{ item.goods?.goods_name || item.productName || '--' }}</view>
            <view class="action-btn" v-if="activeTab === 'selling'" @click="handleSoldout(item)">下架</view>
            <view class="action-btn listing-btn" v-if="activeTab === 'soldout'" @click="handleListing(item)">上架</view>
          </view>
          
          <view class="info-row">
             <view class="info-label">卡密类型：</view>
             <view class="info-value">{{ getChannelNames(item.channels) || '官方激活码' }}</view>
           </view>
          
          <!-- 订单号在出售场景中不显示，且订单编号不为空时才显示 -->
          <view class="info-row" v-if="activeTab !== 'selling' && (item.order?.order_no || item.order_id || item.orderNumber)">
            <view class="info-label">订单编号：</view>
            <view class="info-value">{{ item.order?.order_no || item.order_id || item.orderNumber }}</view>
          </view>
          
          <!-- 有卡号时显示卡号和卡密两行 -->
          <view v-if="item.card_no" class="info-row">
            <view class="info-label">卡号：</view>
            <view class="info-value card-secret">{{ getDisplayCardInfo(item, viewedCardNos.includes(item.id), 'card_no') }}</view>
            <view class="action-buttons">
               <view v-if="!viewedCardNos.includes(item.id)" class="copy-icon" @click="handleCardNoView(item)">
                 <image 
                   src="/static/Images/user/Yincang.png" 
                   mode="aspectFit"
                 ></image>
               </view>
               <view v-if="viewedCardNos.includes(item.id)" class="copy-icon" @click="handleCardNoCopy(item)">
                 <image 
                   src="/static/Images/team/Fuzhi.png" 
                   mode="aspectFit"
                 ></image>
               </view>
             </view>
          </view>
          <view class="info-row">
            <view class="info-label">卡密：</view>
            <view class="info-value card-secret">{{ getDisplayCardInfo(item, viewedCards.includes(item.id), 'carmine') }}</view>
            <view class="action-buttons">
                <view v-if="!viewedCards.includes(item.id)" class="copy-icon" @click="handleCarmineView(item)">
                  <image 
                    src="/static/Images/user/Yincang.png" 
                    mode="aspectFit"
                  ></image>
                </view>
                <view v-if="viewedCards.includes(item.id)" class="copy-icon" @click="handleCarmineCopy(item)">
                  <image 
                    src="/static/Images/team/Fuzhi.png" 
                    mode="aspectFit"
                  ></image>
                </view>
              </view>
          </view>
          <view v-if="item.goods?.charge_address || item.charge_address" class="info-row">
            <view class="info-label">激活地址：</view>
            <view class="info-value">{{ item.goods?.charge_address || item.charge_address }}</view>
            <view class="copy-icon" @click="handleChargeAddressCopy(item)">
              <image 
                src="/static/Images/team/Fuzhi.png" 
                mode="aspectFit"
              ></image>
            </view>
          </view>
          
          <view class="info-row">
             <view class="info-label">上架时间：</view>
             <view class="info-value">{{ formatTime(item.time) || item.listingTime || '无' }}</view>
           </view>
          
          <view class="info-row" v-if="item.delete_time || item.delistingTime">
            <view class="info-label">下架时间：</view>
            <view class="info-value">{{ item.delete_time || item.delistingTime || '--' }}</view>
          </view>
          
          <view class="info-row">
            <view class="info-label">出售价格：</view>
            <view class="info-value price">¥{{ item.price || '0.00' }}</view>
            <view class="price-edit-btn" v-if="activeTab === 'selling' || activeTab === 'soldout'" @click="showPriceEditDialog(item)">改价</view>
          </view>
          
          <view class="info-row">
            <view class="info-label">销售状态：</view>
            <view class="info-value status" :class="getStatusClass(getStatusText(item.status))">{{ getStatusText(item.status) || '--' }}</view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view v-if="loadingMore" class="loading-more">
        <text>加载中...</text>
      </view>
      <view v-else-if="noMoreData && cardList.length > 0" class="no-more-data">
        <text>没有更多数据了</text>
      </view>
      
    </scroll-view>
    </view>
    
    <!-- 底部指示器 -->
    <view class="bottom-indicator"></view>
    
    <!-- 价格编辑弹窗 -->
    <view class="price-edit-dialog" v-if="showPriceDialog">
      <view class="dialog-content">
        <view class="dialog-title">修改价格</view>
        <view class="dialog-input">
          <input type="number" v-model="editPrice" placeholder="请输入新价格" />
        </view>
        <view class="dialog-buttons">
          <view class="dialog-btn cancel" @click="cancelPriceEdit">取消</view>
          <view class="dialog-btn confirm" @click="confirmPriceEdit">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { goodsApi } from '@/utils/api';
import { userStorage } from '@/utils/storage';
import api from '@/utils/api';

// 状态栏高度
const statusBarHeight = ref(0);

// 上滑加载相关
const loadingMore = ref(false);
const noMoreData = ref(false);
const scrollHeight = ref('calc(100vh - 300rpx)');

// 当前激活的标签
const activeTab = ref('all');

// 搜索关键词
const searchKeyword = ref('');

// 价格编辑弹窗
const showPriceDialog = ref(false);
const editPrice = ref('');
const currentEditItem = ref(null);

// 响应式数据
const loading = ref(false);
const cardList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const hasMore = ref(true);

// 卡密查看状态管理
const viewedCards = ref([]); // 记录已查看的卡密ID数组
const viewedCardNos = ref([]); // 记录已查看的卡号ID数组

// 卡密显示工具函数
const maskCardInfo = (cardInfo) => {
  if (!cardInfo || cardInfo.length <= 4) return cardInfo;
  const start = cardInfo.substring(0, 2);
  const end = cardInfo.substring(cardInfo.length - 2);
  const middle = '*'.repeat(Math.min(6, cardInfo.length - 4));
  return start + middle + end;
};

// 获取显示的卡密信息
const getDisplayCardInfo = (item, isViewed = false, fieldType = 'carmine') => {
  let cardInfo = '';
  if (fieldType === 'card_no') {
    cardInfo = item.card_no || '';
  } else {
    cardInfo = item.carmine || '';
  }
  return isViewed ? cardInfo : maskCardInfo(cardInfo);
};

// 获取渠道名称
const getChannelNames = (channels) => {
  if (!channels || !Array.isArray(channels) || channels.length === 0) {
    return '';
  }
  return channels.map(channel => channel.channel).join('、');
};

// 格式化时间戳
const formatTime = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp * 1000);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 获取卡密状态对应的数字
const getStatusNumber = (tab) => {
  const statusMap = {
    'all': 0,       // 全部
    'selling': 1,   // 出售中
    'trading': 2,   // 交易中
    'success': 3,   // 已完成
    'soldout': 4,   // 已下架
    'refund': 5     // 退款/售后（假设为5，根据实际API调整）
  };
  return statusMap[tab] || 0;
};

// 获取卡密列表数据
const loadCardList = async (isRefresh = false) => {
  if (loading.value || (!isRefresh && loadingMore.value)) return;
  
  try {
    if (isRefresh) {
      loading.value = true;
      currentPage.value = 1;
      hasMore.value = true;
      noMoreData.value = false;
    } else {
      loadingMore.value = true;
    }
    
    const status = getStatusNumber(activeTab.value);
    const response = await goodsApi.findAllCarmineByUser({
      status,
      page: currentPage.value,
      size: pageSize.value
    });
    
    if (response && response.data) {
      const newData = response.data.list || response.data || [];
      
      if (isRefresh) {
        cardList.value = newData;
      } else {
        cardList.value = [...cardList.value, ...newData];
      }
      
      // 判断是否还有更多数据
      hasMore.value = newData.length === pageSize.value;
      noMoreData.value = !hasMore.value;
      
      if (newData.length > 0) {
        currentPage.value++;
      }
    }
  } catch (error) {
    console.error('获取卡密列表失败:', error);
    uni.showToast({
      title: error.message || '获取数据失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
    loadingMore.value = false;
  }
};

// 切换标签
const switchTab = (tab) => {
  activeTab.value = tab;
  // 清空已查看的卡密状态
  viewedCards.value = [];
  viewedCardNos.value = [];
  // 重置上滑加载状态
  loadingMore.value = false;
  noMoreData.value = false;
  // 重新加载数据
  loadCardList(true);
};

// 上滑加载更多
const onScrollToLower = () => {
  console.log('触发上滑加载', {
    hasMore: hasMore.value,
    loadingMore: loadingMore.value,
    loading: loading.value,
    cardListLength: cardList.value.length
  });
  
  if (hasMore.value && !loadingMore.value && !loading.value) {
    console.log('开始加载更多数据');
    loadCardList(false);
  }
};

// 返回上一页
const navigateBack = () => {
 uni.navigateTo({
        url: '/pages/users/index'
      });
};

// 处理搜索
const handleSearch = () => {
  // 清空已查看的卡密状态
  viewedCards.value = [];
  viewedCardNos.value = [];
  // 重新加载数据
  loadCardList(true);
};

// 页面初始化
onMounted(() => {
  // #ifdef MP-WEIXIN
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  // 获取胶囊按钮信息
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 计算状态栏高度：系统状态栏高度 + 胶囊按钮高度 + 额外间距
  statusBarHeight.value = (systemInfo.statusBarHeight || 0) + (menuButtonInfo.height || 32) + 8
  // 计算scroll-view高度
  scrollHeight.value = `calc(100vh - ${statusBarHeight.value + 200}rpx)`
  // #endif
  
  // #ifndef MP-WEIXIN
  // 非微信小程序环境
  scrollHeight.value = 'calc(100vh - 200rpx)'
  // #endif
  
  loadCardList(true);
});

// 复制卡密信息
const copyCardSecret = (secret) => {
  uni.setClipboardData({
    data: secret,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      });
    }
  });
};

// 下架卡密
const handleSoldout = (item) => {
  uni.showModal({
    title: '确认下架',
    content: '确定要下架该卡密吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用下架接口
          await api.shelfCarmins({
            carmine_id: item.id,
            type: 1 // 1表示下架
          });
          
          uni.showToast({
            title: '下架成功',
            icon: 'success'
          });
          
          // 重新加载当前标签的数据
          loadCardList(true);
        } catch (error) {
          uni.showToast({
            title: error.message || '下架失败',
            icon: 'none'
          });
        }
      }
    }
  });
};

// 上架卡密
const handleListing = (item) => {
  uni.showModal({
    title: '确认上架',
    content: '确定要重新上架该卡密吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用上架接口
          await api.shelfCarmins({
            carmine_id: item.id,
            type: 0 // 0表示上架
          });
          
          uni.showToast({
            title: '上架成功',
            icon: 'success'
          });
          
          // 重新加载当前标签的数据
          loadCardList(true);
        } catch (error) {
          uni.showToast({
            title: error.message || '上架失败',
            icon: 'none'
          });
        }
      }
    }
  });
};

// 显示价格编辑弹窗
const showPriceEditDialog = (item) => {
  currentEditItem.value = item;
  editPrice.value = item.price || '';
  showPriceDialog.value = true;
};

// 取消价格编辑
const cancelPriceEdit = () => {
  showPriceDialog.value = false;
  currentEditItem.value = null;
  editPrice.value = '';
};

// 确认价格编辑
const confirmPriceEdit = async () => {
  if (currentEditItem.value && editPrice.value) {
    try {
      // 调用改价接口
      await api.changeCarminePrice({
        carmine_id: currentEditItem.value.id,
        price: editPrice.value
      });
      
      showPriceDialog.value = false;
      currentEditItem.value = null;
      editPrice.value = '';
      
      uni.showToast({
        title: '价格修改成功',
        icon: 'success'
      });
      
      // 重新加载当前标签的数据
      loadCardList(true);
    } catch (error) {
      uni.showToast({
        title: error.message || '价格修改失败',
        icon: 'none'
      });
    }
  } else {
    uni.showToast({
      title: '请输入有效价格',
      icon: 'none'
    });
  }
};

// 处理查看卡号
const handleCardNoView = (item) => {
  const cardId = item.id;
  if (!viewedCardNos.value.includes(cardId)) {
    viewedCardNos.value.push(cardId);
    uni.showToast({
      title: '已显示完整卡号',
      icon: 'success',
      duration: 1500
    });
  }
};

// 处理复制卡号
const handleCardNoCopy = (item) => {
  const copyData = item.card_no || '';
  
  if (copyData) {
    uni.setClipboardData({
      data: copyData,
      success: () => {
        uni.showToast({
          title: '卡号复制成功',
          icon: 'success'
        });
      },
      fail: () => {
        uni.showToast({
          title: '复制失败',
          icon: 'error'
        });
      }
    });
  }
};

// 处理查看卡密
const handleCarmineView = (item) => {
  const cardId = item.id;
  if (!viewedCards.value.includes(cardId)) {
    viewedCards.value.push(cardId);
    uni.showToast({
      title: '已显示完整卡密',
      icon: 'success',
      duration: 1500
    });
  }
};

// 处理复制卡密
const handleCarmineCopy = (item) => {
  const copyData = item.carmine || '';
  
  if (copyData) {
    uni.setClipboardData({
      data: copyData,
      success: () => {
        uni.showToast({
          title: '卡密复制成功',
          icon: 'success'
        });
      },
      fail: () => {
        uni.showToast({
          title: '复制失败',
          icon: 'error'
        });
      }
    });
  }
};

// 处理复制激活地址
const handleChargeAddressCopy = (item) => {
  const copyData = item.goods?.charge_address || item.charge_address || '';
  
  if (copyData) {
    uni.setClipboardData({
      data: copyData,
      success: () => {
        uni.showToast({
          title: '激活地址复制成功',
          icon: 'success'
        });
      },
      fail: () => {
        uni.showToast({
          title: '复制失败',
          icon: 'error'
        });
      }
    });
  }
};

// 处理查看/复制卡号（保留原函数）
const handleCardNoViewOrCopy = (item) => {
  const cardId = item.id;
  const isViewed = viewedCardNos.value.includes(cardId);
  
  if (!isViewed) {
    // 第一次点击：查看完整卡号
    viewedCardNos.value.push(cardId);
    uni.showToast({
      title: '已显示完整卡号',
      icon: 'success',
      duration: 1500
    });
  } else {
    // 第二次点击：复制卡号
    const copyData = item.card_no || '';
    
    if (copyData) {
      uni.setClipboardData({
        data: copyData,
        success: () => {
          uni.showToast({
            title: '卡号复制成功',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'error'
          });
        }
      });
    }
  }
};

// 处理查看/复制卡密（保留原函数）
const handleCarmineViewOrCopy = (item) => {
  const cardId = item.id;
  const isViewed = viewedCards.value.includes(cardId);
  
  if (!isViewed) {
    // 第一次点击：查看完整卡密
    viewedCards.value.push(cardId);
    uni.showToast({
      title: '已显示完整卡密',
      icon: 'success',
      duration: 1500
    });
  } else {
    // 第二次点击：复制卡密
    const copyData = item.carmine || '';
    
    if (copyData) {
      uni.setClipboardData({
        data: copyData,
        success: () => {
          uni.showToast({
            title: '卡密复制成功',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'error'
          });
        }
      });
    }
  }
};

// 处理查看/复制卡密（保留原函数以防其他地方使用）
const handleViewOrCopy = (item) => {
  const cardId = item.id;
  const isViewed = viewedCards.value.includes(cardId);
  
  if (!isViewed) {
    // 第一次点击：查看完整卡密
    viewedCards.value.push(cardId);
    uni.showToast({
      title: '已显示完整信息',
      icon: 'success',
      duration: 1500
    });
  } else {
    // 第二次点击：复制卡密信息
    let copyData = '';
    if (item.card_no) {
      // 有卡号时复制卡号和卡密
      copyData = `卡号：${item.card_no}\n卡密：${item.carmine}`;
    } else {
      // 无卡号时只复制卡密
      copyData = item.carmine || '';
    }
    
    if (copyData) {
      uni.setClipboardData({
        data: copyData,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'error'
          });
        }
      });
    }
  }
};

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 1:
      return '出售中';
    case 2:
      return '交易中';
    case 3:
      return '已完成';
    case 4:
      return '已下架';
    default:
      return '未知状态';
  }
};

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case '出售中':
    case '在售':
    case 'selling':
      return 'status-selling';
    case '交易中':
    case 'trading':
      return 'status-trading';
    case '已完成':
    case '交易成功':
    case 'success':
      return 'status-success';
    case '已下架':
    case 'soldout':
      return 'status-soldout';
    case '退款/售后':
    case 'refund':
      return 'status-refund';
    default:
      return 'status-default';
  }
};

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  
  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
};

// 根据搜索关键词过滤卡密列表
const filteredCardList = computed(() => {
  if (!searchKeyword.value) {
    return cardList.value;
  }
  
  const keyword = searchKeyword.value.toLowerCase();
  return cardList.value.filter(card => {
    const productName = (card.goods_name || card.productName || '').toLowerCase();
    const cardSecret = (card.carmine || card.cardSecret || '').toLowerCase();
    const orderNumber = (card.order_no || card.orderNumber || '').toLowerCase();
    
    return productName.includes(keyword) ||
           cardSecret.includes(keyword) ||
           orderNumber.includes(keyword);
  });
});
</script>

<style lang="scss">
/* 状态栏样式 */
.status-bar {
  width: 100%;
  background: linear-gradient(180deg, #FF7B80 0%, rgba(249, 226, 166, 0) 100%);
}

/* 滚动容器样式 */
.card-scroll {
  width: 100%;
  min-height: 60vh;
  overflow-y: auto;
}

/* 加载更多样式 */
.loading-more,
.no-more-data {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx;
  color: #999;
  font-size: 28rpx;
}

.card-manage-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-top: calc(var(--status-bar-height, 44px) + 80rpx);
}

/* 顶部背景 */
.shop-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 30rpx;
  padding-top: calc(var(--status-bar-height, 44px) + 20rpx);
  box-sizing: border-box;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 11;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 750rpx;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 30rpx;
  z-index: 12;
  cursor: pointer;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.2s;
}

.back-btn:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  color: #222;
  font-size: 36rpx;
  font-weight: 500;
  text-align: center;
  width: 100%;
}

/* 商品状态标签 */
.status-tabs {
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-top: 30rpx;
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
}

.tab {
  font-size: 28rpx;
  color: #666;
  margin-right: 40rpx;
  position: relative;
  padding-bottom: 10rpx;
}

.tab.active {
  color: #ff4d4f;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ff4d4f;
  border-radius: 2rpx;
}

/* 搜索框 */
.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-top: 2rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.search-input input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
}

.search-btn {
  width: 120rpx;
  height: 70rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

/* 卡密列表 */
.card-list {
  padding: 20rpx 30rpx;
}

.card-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-info {
  width: 100%;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
}

.info-label {
  width: 160rpx;
  font-size: 28rpx;
  color: #999;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.product-name {
  font-weight: 500;
  font-size: 30rpx;
}

.card-secret {
  font-family: monospace;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.copy-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-icon image {
  width: 30rpx;
  height: 30rpx;
}

.price {
  color: #ff4d4f;
  font-weight: 500;
}

.action-btn {
  width: 100rpx;
  height: 50rpx;
  background-color: #f5f5f5;
  color: #666;
  font-size: 24rpx;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
}

.listing-btn {
  background-color: #52c41a;
  color: #fff;
}

.price-edit-btn {
  width: 80rpx;
  height: 50rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
}

.status {
  font-weight: 500;
}

.status-selling {
  color: #52c41a;
}

.status-trading {
  color: #1890ff;
}

.status-success {
  color: #52c41a;
}

.status-soldout {
  color: #999;
}

.status-refund {
  color: #ff4d4f;
}

/* 价格编辑弹窗 */
.price-edit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.dialog-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: 500;
  text-align: center;
  margin-bottom: 30rpx;
}

.dialog-input {
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}

.dialog-input input {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
}

.dialog-buttons {
  display: flex;
  justify-content: space-between;
}

.dialog-btn {
  width: 250rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.cancel {
  background-color: #f5f5f5;
  color: #666;
}

.confirm {
  background-color: #ff4d4f;
  color: #fff;
}

/* 底部指示器 */
.bottom-indicator {
  width: 120rpx;
  height: 8rpx;
  background-color: #ddd;
  border-radius: 4rpx;
  margin: 30rpx auto;
}

/* 加载和空数据状态 */
.loading-container,
.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>